<template>
	<view class="content">
		<!-- name -->
		<view class='father_view'> 
			<view class='son_view'> 
			  <view class="title-bg">想说就说(最多120个汉字)：</view>
			  <textarea class="textarea-bg" v-model="text1" @blur="inputText"  placeholder="请输入留言" /> 
			</view> 
		</view>
		
		<!-- id -->
		<!-- <view class="uni-form-item uni-column">
		    <view class="title"><text class="uni-form-item__title">数字输入的 input</text></view>
		    <view class="uni-input-wrapper">
		        <input class="uni-input" type="number" placeholder="这是一个数字输入框" />
		    </view>
		</view> -->
		
		<!-- name -->
		<!-- <view class="uni-form-item uni-column">
		    <view class="title"><text class="uni-form-item__title">可自动聚焦的 input</text></view>
		    <view class="uni-input-wrapper">
		        <input class="uni-input" focus placeholder="自动获得焦点" />
		    </view>
		</view> -->
		
		<!-- 图片 -->
		<view class="images_box">
			<block v-for="(item, index) in imglist" :key="index">
			  <view class='img-box'>
				<image class='img' :src='item' mode='aspectFill'></image>
				<view class='img-delete' @click='imgDelete1' :data-delindex="index">
					<image class='img1' src='../../static/delect.png' mode='aspectFit'></image>  
				</view>
			  </view>
			</block>
			
			<view class='img-box' @click='addPic1' v-if="imglist.length<9">
				<image class='img' src='../../static/add_image.png'></image>  
			</view>
			<br>
			<view class='img-box' @click='addPic2' v-if="imglist.length<9">
				<image class='img' src='../../static/add_image.png'></image>  
			</view>
		</view>
		
		<button @click='uploadimage'>上传图片</button>			
		<button @click='viewmemo'>查看留言</button>
		
		<!-- <text class="code">--- imglist: {{imglist}} ---</text> -->
		<text class="code">--- img0: {{img0}} ---</text>
		<br>
		<text class="code">--- img1: {{img1}} ---</text>
		<!-- 多图上传 -->
	</view>
</template>

<script>
	
	export default {
		data() {
			return {
				title: 'Hello',
				text1:'',
				imglist00:[],
				imglist:[],//选择图片后生成的临时地址数组
				imgFileName: [],
				imgFilePath: [],
				imgFileDict: [],
				img1: "",
				img0: "",
				
			}
		},
		onLoad() {

		},
		methods: {
			//*获取文本框内容*//
			inputText:function (e) {
				this.text1 = e.detail.value	
			},
			
			//*选择图片*//
			addPic2: async function() {
				let that = this				
				uni.chooseImage({
					count: 1,  // 最多可以选择的图片张数，默认9
					sizeType: ['compressed'], // original 原图，compressed 压缩图，默认二者都有
					sourceType: ['album', 'camera'], // album 从相册选图，camera 使用相机，默认二者都有
					success: function (res) {
						if (that.imglist.length === 0) {
							that.imglist = res.tempFilePaths;
							that.img1 = res.tempFilePaths;
						} else if (that.imglist.length < 9) {
							that.imglist = that.imglist.concat(res.tempFilePaths); //concat追加到数组
						}
						console.log('--------------- tempFilePaths ', res.tempFilePaths);
					}
				})
			},


			//*选择图片*//
			addPic1: async function() {
				let that = this				
				uni.chooseImage({
					count: 2,  // 最多可以选择的图片张数，默认9
					sizeType: ['compressed'], // original 原图，compressed 压缩图，默认二者都有
					sourceType: ['album', 'camera'], // album 从相册选图，camera 使用相机，默认二者都有
					success: function (res) {
						if (that.imglist.length === 0) {
							that.imglist = res.tempFilePaths;
							that.img0 = res.tempFilePaths;
						} else if (that.imglist.length < 9) {
							that.imglist = that.imglist.concat(res.tempFilePaths); //concat追加到数组
						}
						// const tempFilePaths = chooseImageRes.tempFilePaths;
						// that.img0 = res.tempFilePaths[0];
						// that.img1 = res.tempFilePaths[1];
						// console.log('***', that.img0, that.img1);
						console.log('--------------- tempFilePaths ', res.tempFilePaths);
					}
				})
			},
			
			//*显示选择后的图片*//
			imgbox: function (e) {				
				this.imglist = e.detail.value
			},
			
			//* 删除已经选择的图片 *//
			imgDelete1: function (e) {				
				let index = e.currentTarget.dataset.delindex; //获取要删除的图片的下标，否则删除的永远是第一张 ,对应 <view class='img-delect' @click='imgDelete1' :data-delindex="index">
				this.imglist.splice(index, 1);			  	
			},
			
			//*上传图片*//
			async uploadimage() {
				var myUrl = this.$baseUrl + '/api/index/ForecastRegistration/2/';
				const name_ls = ['picture_id_card_positive', 'picture_id_card_negative'];
				var i = 0;
				// 上传已保存的照片
				// const tempFilePaths = this.imglist;
				
				console.log('~~~~~~~~~~~~~~ img0:', this.img0, name_ls[i]);
				await uni.uploadFile({
				    url: myUrl,
				    filePath: this.img0,
				    name: name_ls[i],
				    formData: {
				        'name': this.text1,
						'post_type': 'update'
				    },
				    success: (uploadFileRes) => {
						var data = JSON.parse(uploadFileRes.data);
						if(200 <= data.status < 300){
							console.log(i, '*** Update Successfully!', name_ls[i]);
						}
						console.log(i, '--- data: ', data);
				        // console.log(uploadFileRes.data);
				    }
				});
				
				i = 1;
				console.log('~~~~~~~~~~~~~~ img1:', this.img1, name_ls[i]);
				await uni.uploadFile({
				    url: myUrl,
				    filePath: this.img1,
				    name: name_ls[i],
				    formData: {
				        'name': this.text1,
						'post_type': 'update'
				    },
				    success: (uploadFileRes) => {
						var data = JSON.parse(uploadFileRes.data);
						if(200 <= data.status < 300){
							console.log(i, '*** Update Successfully!', name_ls[i]);
						}
						console.log(i, '--- data: ', data);
				        // console.log(uploadFileRes.data);
				    }
				});
			
			},
			
			
			// 查看示例
			viewmemo:function (e) {
				uni.navigateTo({  //跳转到指定页面
					url: "../memo/memo",
				})
			}
			
			
		}
		
	}

</script>

<style lang="scss">
	.img{
		width: 300upx;
		height: 100upx;
	}
	.img1{
		width: 150upx;
		height: 100upx;
		display: inline-block;
		overflow: hidden;
		position: relative;
		// width: 120upx;
		// height: 60upx;
		margin-bottom: 100upx;
	}
</style>
<!--  -->